<template>
    <div class="detail">
        <div class="f18 lh10 flex flex-jus-between">
            <div style="color:var(--el-color-primary)" class="flex">
                <el-icon class="m-r-5"><Switch /></el-icon>
                收入明细
            </div>
            <!-- 添加返回上一页图标 -->
            <el-button type="primary" @click="$router.go(-1)" class="m-l-5">
                <img src="@/assets/go-back.svg" class="go-back" />
                返回
            </el-button>
        </div>
        <el-card class="m-t-15" v-loading="tableStore.tableLoading">
            <el-form :model="tableStore.formIncome" label-width="auto" style="max-width: 615px">
                <el-form-item label="起止日期：" class="m-b-12">
                    <el-date-picker
                        v-model="tableStore.formIncome.date"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :clearable="false"
                        :shortcuts="dateShortcuts"
                        @change="resetSearch"
                        :disabled-date="pickerOptions"
                    />
                </el-form-item>
                 <el-form-item label="收支类型：" class="m-b-12">
                    <el-select v-model="tableStore.formIncome.tradeType" @change="resetSearch">
                        <el-option 
                        v-for="item in incomeTypeList"
                        :key="item.id" 
                        :label="item.label" 
                        :value="item.id" 
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电子账簿ID：" class="m-b-12">
                    <el-select v-model="tableStore.formIncome.balanceAcctId" @change="resetSearch">
                        <el-option 
                        v-for="item in tableStore.balanceAcctIdList"
                        :key="item.id" 
                        :label="item.name" 
                        :value="item.id" 
                        ></el-option>
                    </el-select>
                    <!-- <div class="flex flex-jus-start w100p">
                        <el-input v-model="tableStore.formIncome.balanceAcctId" placeholder="请输入电子账簿ID" style="flex:1"/>
                        <el-button type="primary" @click="onSubmit" :loading="tableStore.submitLoading" class="m-l-10">查询</el-button>
                    </div> -->
                </el-form-item>
            </el-form>
            <div class="hr o5"></div>
            <TableIncome 
                :select="true" 
                :tableHeight="tableHeight" 
            />
        </el-card>
    </div>
</template>
<script setup lang="ts">
document.title = "收入明细";
import { ref,onMounted } from 'vue'
import { Switch } from '@element-plus/icons-vue'
import TableIncome from "@/components/TableIncome.vue";
// 表格数据
import { useTableStore } from '@/stores/useTableStore';
const tableStore = useTableStore();
// 设置表格高度
import { adaptiveHeight,pickerOptions } from '@/utils/func'
import { dateShortcuts,incomeTypeList } from '@/utils/constant'
const tableHeight = ref(adaptiveHeight(440)) // 470

// 改变搜索条件自动搜索
const resetSearch = () => {
    tableStore.pagination.currentPage = 1
    onSubmit()
}
const onSubmit = () => {
    // 搜索数据
    setTimeout(()=>{
        tableStore.submitLoading = true
        tableStore.pagination.currentPage = 1
        tableStore.getTableIncomeList() // 保存表格数据
    },10)
}
onMounted(()=>{
    // 初始化搜索参数
    tableStore.pagination.currentPage = 1
    tableStore.pagination.pageSize    = 20
    tableStore.formIncome = {
        tradeType : 11,
        date : [new Date(Date.now() - 7 * 24 * 3600 * 1000),new Date()], // 时间范围      
    }
    tableStore.formIncome.balanceAcctId = '-1'
    onSubmit() // 默认搜索一次
})
</script>
<style>
    .hr {
        width: 95%;
        height: 3px;
        margin: 20px auto;
        border:none;
        background-color: #dedede;
        border-radius: 10px;
    }
    .m-b-12 {
        margin-bottom: 12px
    }
    .w100 {
        width: 100px;
    }
    .go-back {
        display: block;
        width: 20px;
        position: relative;
        top:-1px;
        left:-5px;
    }
</style>
